<template>
  <div class="status-wrap flex-row-center">
    <PieCharts :data="statusData" :colors="colors" />
  </div>
</template>

<script lang="ts" setup>
import PieCharts from '../PieCharts.vue'
import { watch, ref } from 'vue'

const props = withDefaults(
  defineProps<{
    list: Record<string, any>[]
  }>(),
  {
    list: () => [],
  },
)

const colors = ['#159AFF', '#66E1DF', '#FFC97A', '#D0DEEE']

const statusData = ref([
  {
    name: '正常推进',
    value: 0,
    type: 'normal',
  },
  {
    name: '已完成',
    value: 0,
    type: 'completed',
  },
  {
    name: '已超时',
    value: 0,
    type: 'timeOut',
  },
  {
    name: '未签收',
    value: 0,
    type: 'notSigned',
  },
])

watch(
  () => props.list,
  (newVal) => {
    updateData(newVal)
  },
  {
    deep: true,
  },
)

function updateData(data: Record<string, any>) {
  if (!data?.length) return
  let oldTotalList = statusData.value
  oldTotalList = oldTotalList.map((item) => {
    const curType = data.find((dataItem) => dataItem.type === item?.type)
    return {
      ...item,
      value: curType ? curType?.number : 0,
    }
  })

  statusData.value = oldTotalList
}
</script>

<style lang="scss" scoped>
.status-wrap {
  width: vw(220);
}
</style>
